<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-row class="searchSummary">
      <a-col :span="8">
        <p>所属单位:</p>
        <OrgTreeSelect @change="changeOrgTreeSelect"></OrgTreeSelect>
      </a-col>
    </a-row>
    <a-row :gutter="10" class="updateSummary">
      <!-- 树搜索 -->
      <!-- <a-col :span="6" class="permission-collapsed" :class="{ 'permission-tree-collapsed': collapsed }">
        <a-card :style="{ border: collapsed ? 'none' : 'border: 1px solid #e8e8e8' }" class="page-height-tree">
          <title-name title="组织架构" />
          <PermissionTreeOrganization :collapsed.sync="collapsed" @select="handleSelect" ref="treeSelect" />
        </a-card>
      </a-col> -->
      <a-spin :spinning="loading">
      <a-col :span="24">
        <a-tabs default-active-key="1" :animated="false">
          <a-tab-pane key="1" tab="方案审批情况">
            <SchemeApproval :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></SchemeApproval>
          </a-tab-pane>
          <a-tab-pane key="2" tab="方案修改和实施情况">
            <SchemeModification :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></SchemeModification>
          </a-tab-pane>
          <a-tab-pane key="3" tab="施组方案联审">
            <JointTrial :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></JointTrial>
          </a-tab-pane>
          <a-tab-pane key="4" tab="交底管理">
            <DisclosureManagement :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></DisclosureManagement>
          </a-tab-pane>
          <a-tab-pane key="5" tab="双优化工作管理">
            <DoubleOptimization :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></DoubleOptimization>
          </a-tab-pane>
          <a-tab-pane key="6" tab="施工测量管理">
            <ConstructionSurvey :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></ConstructionSurvey>
          </a-tab-pane>
          <a-tab-pane key="7" tab="标准规范管理">
            <SpecificationTable :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></SpecificationTable>
          </a-tab-pane>
          <a-tab-pane key="8" tab="下月工作安排">
            <WorkArrangement :monthTechnicalId="id" :orgTreeObj="orgTreeObj"></WorkArrangement>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      </a-spin>
    </a-row>
    <div class="tool-btns page-btn-right-top">
      <a-button class="ml12" type="primary" @click="downZipFc">导出</a-button>
      <a-button class="ml12" type="primary" @click="handleClose"> 关闭 </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { summaryMixin } from './components/mergeCell'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import PermissionTreeOrganization from '@/components/businessComponents/PermissionTreeOrganization'
import SchemeApproval from './components/schemeApproval' //方案审批
import SchemeModification from './components/schemeModification' //方案修改和实施情况
import JointTrial from './components/jointTrial' //施组方案联审
import DisclosureManagement from './components/disclosureManagement' //交底管理
import DoubleOptimization from './components/doubleOptimization' //双优化工作情况
import ConstructionSurvey from './components/constructionSurvey' //施工测量管理
import SpecificationTable from './components/specificationTable' //下个月安排
import WorkArrangement from './components/workArrangement' //下个月安排
import OrgTreeSelect from '@/components/OrgTreeSelect'
import {monthTechnicalExportWord } from '@/api/technical/summary' // api
export default {
  mixins: [summaryMixin], //混入文件
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    PermissionTreeOrganization,
    SchemeApproval,
    SchemeModification,
    JointTrial,
    DisclosureManagement,
    DoubleOptimization,
    ConstructionSurvey,
    SpecificationTable,
    WorkArrangement,
    OrgTreeSelect
  },
  data() {
    return {
      // 收缩展开树
      collapsed: false,
      gData: [],
      id: '',
      tabKey: '1',
      orgTreeObj: {},
      loading:false
    }
  },
  async mounted() {},
  computed: {},
  methods: {
    changeOrgTreeSelect(data) {
      this.orgTreeObj = data
    },
    handleClose() {
      this.$multiTab.close(this.$route.fullpath)
    },
    async downZipFc() {
      let obj = {
        monthTechnicalId:this.id,
        searchQuery: this.orgTreeObj
      }
      this.loading = true;
      monthTechnicalExportWord(obj).then((res)=>{
        this.loading = false;
        this.handleDownload(res)
      })
 
    },
    /**
     * 转义下载
     * @param parameter
     */
    handleDownload(res) {
      const blob = new Blob([res.data])
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      console.log('filenamefilename', filename)
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename.substring(filename.indexOf("''") + 1) // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    },
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.updateSummary{
  @{deep}.ant-col-24{
    background-color: #fff;
    padding: 0 18px!important;
  }
}
.searchSummary{
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  @{deep}.ant-col-8{
    display: flex;
    p{
      width: 70px;
    }
    &>div{
      width: 350px;
    }
  }
  @{deep} .treeOrgBox .searchIcon{
    top: 7px;
  }
}
</style>